<template>
  <div>
    <gray-line></gray-line>
    <ul class="activity-wrapper">
      <li v-for="(item,id) of activitys" :key="id" :style="item.activityStyle" class="activity-li">
        <a href="item.link"></a>
      </li>
      <li></li>
    </ul>
  </div>
</template>
<script>
import GrayLine from './grayLine'

export default {
  name: 'HomeActivity',
  data: () => {
    return {
      activitys: [
        {
          id: 0,
          activityStyle: {
            background: 'url(http://img1.qunarzz.com/piao/fusion/1806/29/30427c0e0658b502.png) center center no-repeat',
            backgroundSize: 'auto 100%',
            float: 'left'
          },
          link: 'http://sale.piao.qunar.com/touch/mk/special?in_track=t_mp_tgw_temai&from=as_rmhd_1_%E4%B8%8A%E6%B5%B7&cat=from_area%3Dts_yunying%26from_index%3D0%26dist_city%3D%25E4%25B8%258A%25E6%25B5%25B7'
        },
        {
          id: 1,
          activityStyle: {
            background: 'url(http://img1.qunarzz.com/piao/fusion/1806/36/e89032c5f7714f02.png) center center no-repeat',
            backgroundSize: 'auto 100%',
            float: 'right'
          },
          link: 'https://sale.piao.qunar.com/touch/topic/mk/t_3063.htm?in_track=t_mp_tgw_sqdc&from=as_rmhd_2_%E4%B8%8A%E6%B5%B7&cat=from_area%3Dts_yunying%26from_index%3D1%26dist_city%3D%25E4%25B8%258A%25E6%25B5%25B7'
        }
      ]
    }
  },
  components: {
    GrayLine
  }
}
</script>
<style lang="stylus" scoped>
  .activity-wrapper
    width: 100%;
    margin-top: .2rem;
    background-color: #fff;
    height 1.4rem
    .activity-li
      flex: 2;
      position: relative;
      height: 1.4rem;
      width: 50%;
      line-height: 1.4rem;
      color: #212121;
      font-size: .28rem;
</style>
